import React, {PureComponent} from "react"
import "./index.less"
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { ArrowLeftOutlined, RightOutlined } from '@ant-design/icons';
import { Breadcrumb, Button, PageHeader, Table } from "antd";
import {Link} from "react-router-dom"
import SearchAutoComplete from "libs/search-auto-complete"
import columns from "./columns"
import {withRouter} from "react-router"
import {defaultSize} from "project-config"
import pageCompose from "./compose"
import {appContext} from "context/app-context"
import cs from "classnames"

const rowSelection = ($selectedRowKeys, selectedRowKeys) => ({
  onChange: (rowKeys) => {
    $selectedRowKeys(rowKeys)
  },
  selectedRowKeys: selectedRowKeys,
})


@withRouter
@appContext
@pageCompose
export default class MyMessage extends PureComponent {

  constructor(props) {
    super(props)
  }

  render() {
    const {
      loading,
      pagination,
      dataSource,
      $selectedRowKeys,
      selectedRowKeys,
      onFastSearch,
      onPageChange,
      onDelete,
      onRead,
      deleteBatch
    } = this.props
    const scroll = {y: 200}

    const checkConfig = rowSelection($selectedRowKeys, selectedRowKeys)


    return (
      <div className={'zr-panel'}>

        <div className={'zr-panel-header'}>
          <div>
            {/*<Breadcrumb>*/}
            {/*  <Breadcrumb.Item><Link to="/app/home"><LegacyIcon type={'home'}/></Link></Breadcrumb.Item>*/}
            {/*  <Breadcrumb.Item>我的消息</Breadcrumb.Item>*/}
            {/*</Breadcrumb>*/}
            <PageHeader backIcon={<ArrowLeftOutlined />}
                        onBack={() => window.history.back()} title={`主页`}/>
          </div>
        </div>

        <div className={'ld2-list-page-box absolute'}>
          <div className={cs('ld2-query-box')} style={{paddingRight: '20px'}}>
            <SearchAutoComplete width={300} allowClear={true} onSubmit={onFastSearch} placeholder={'请输入关键字查询'}/>

            <div style={{width: '65px'}}></div>

            <Button type={'primary'} className={'red'}
                    size={defaultSize}
                    onClick={cancelBatch}
                    disabled={selectedRowKeys.length < 1}>
              <LegacyIcon type={'delete'}/>
              批量删除 ({selectedRowKeys.length})
            </Button>

            {/*<div style={{width: '45px'}}></div>*/}

            <Button type={'primary'}
                    style={{display: 'none'}}
                    size={defaultSize}>
              <RightOutlined />
              高级搜索
            </Button>
          </div>

          <div>

          </div>

          <div className={'ld2-table-box'}>
            <Table
              rowKey={record => record.id}
              onChange={onPageChange}
              rowSelection={checkConfig}
              loading={loading}
              pagination={pagination}
              size={'middle'}
              columns={columns({onRead, onDelete})}
              dataSource={dataSource}/>
          </div>
        </div>
      </div>
    );
  }

}


